<template>
	<view class="pages">
			<view class="coupon-list">
				<s-skeleton type="list" :loading="loading3"></s-skeleton>
				<view class="coupon-card" v-for="item in couponList" :key="item.id">
					<view class="card-content">
						<view class="amount-content" :class="[`status${item.type}`]">
							<view class="amount">
								<view class="price">{{item.type == 3 ? item.type_text : Number(item.price)}}</view>
								<text>{{item.type == 1 ? '元' : item.type == 2 ? '折' : ''}}</text>
							</view>
							<view class="amount-text" v-if="item.type == 1">
								满{{Number(item.ordermoney)}}减{{Number(item.price)}}
							</view>
							<view class="amount-text" v-if="item.type == 2">
								满{{Number(item.ordermoney)}}打{{Number(item.price)}}折
							</view>
							<view class="amount-text" v-if="item.type == 3">
								{{item.name}}
							</view>
						</view>
						<view class="coupon-info">
							<view class="info-name">
								{{item.name}}
							</view>
							<view class="info-time">
								{{item.store_id_text}}
							</view>
							<view class="info-time">
								每人限领{{item.limit}}张
							</view>
							
							<view class="info-time">
								{{item.starttime_text}}~{{item.endtime_text}}
							</view>
						</view>
					</view>
			
					<view class="coupon-desc" :class="[`status${item.type}`]">
						<text>{{item.content}}</text>
						<view @tap="onreceive(item, index)" v-if="item.is_receive == 2">
							<text>立即领取</text>
						</view>
					</view>
				</view>
				<s-empty v-if="couponList && couponList.length == 0"></s-empty>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading3: true,
				colors: "#fa436a",
				couponList: []
			}
		},
		onLoad() {
			this.loadData();
		},
		methods: {
			async loadData() {
				let res = await this.$api.getCouponLists();
				if (res.code == 1) {
					this.couponList = res.data
					this.loading3 = false;
				}
			},
			async onreceive(item, index) { //领取优惠券
				let that = this
				let res = await this.$api.addReceive({
					coupon_id: item.id
				});
				if (res.code == 1) {
					this.$wanlshop.msg('领取成功')
					this.loadData();
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	.pages {
		padding-top: 20rpx;
		.coupon-list {
			background: #f6F7F9;
			min-height: 340rpx;
			flex: 1;
			overflow-y: scroll;
			.coupon-card {
				margin: 0rpx 20rpx 20rpx;
				background: #fff;
				border-radius: 20rpx;
				padding: 10rpx 20rpx 0 20rpx;

				.card-content {
					display: flex;
					margin: 30rpx 0;

					.amount-content {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						padding: 0 10rpx;
						width: 260rpx;

						&.status1 {
							color: #e35319;
						}

						&.status2 {
							color: #6bb44f;
						}

						&.status3 {
							color: #4483fc;
						}

						.amount {
							display: flex;
							align-items: flex-end;

							text {
								margin-bottom: 10rpx;
							}

							.price {
								font-weight: 500;
								font-size: 54rpx;
								margin-right: 4rpx;
							}
						}

						.amount-text {
							margin-top: 4rpx;
						}
					}

					.coupon-info {
						flex: 1;
						color: #323233;
						margin-left: 20rpx;

						.info-name {
							font-size: 30rpx;
							font-weight: 500;
						}

						.info-time {
							margin-top: 10rpx;
							font-size: 26rpx;
						}
					}
				}

				.coupon-desc {
					border-top: 1px dashed #ebedf0;
					padding: 20rpx;
					color: #888;
					> text {
						display: block;
					}
					view {
						// border: 1px solid transparent;
						margin-top: 20rpx;
						display: flex;
						justify-content: flex-end;
						align-items: center;
						text {
							border-radius: 50rpx;
							padding: 10rpx 20rpx;
							display: inline-block;
						}
					}

					&.status1 {
						view text {
							background-color: #e35319;
							color: #fff;
						}
					}

					&.status2 {
						view text {
							background-color: #6bb44f;
							color: #fff;
						}
					}

					&.status3 {
						view text {
							background-color: #4483fc;
							color: #fff;
						}
					}
				}
			}

			.coupon-card:last-of-type {
				margin-bottom: 0;
			}

		}

		.button-cancel {
			margin: 20rpx;
			height: 80rpx;
			background: #FA802A;
			border-radius: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-size: 32rpx;
			font-weight: 500;
		}
	}
</style>